<template>
	<ve-histogram :data="data" :width="width" :height="height" :extend="{ ...defaultExtend, ...extend }"></ve-histogram>
</template>

<script>
//柱状图
export default {
	props: {
		//图表的宽度
		width: {
			type: String,
			default: '100%',
		},
		//图表的高度
		height: {
			type: String,
			default: '300px',
		},
		//图表数据
		data: {
			type: Object,
			default: () => {
				return {
					columns: [],
					rows: [],
				};
			},
		},
		//图表扩展属性
		extend: {
			type: Object,
			default: () => {
				return {
					//默认图表的颜色
					//color: ['pink', 'skyblue', 'gold', 'yellow'],
					legend: {
						show: false,
					},
				};
			},
		},
	},
	data() {
		this.defaultExtend = {
			grid: {
				top: '14%',
				left: '3%',
				right: '3%',
				bottom: '4%',
			},
			xAxis: {
				axisLabel: {
					show: true,
					textStyle: {
						color: '#707070',
					},
				},
				axisLine: {
					lineStyle: {
						color: '#efefef',
						width: 1,
					},
				},
			},
			yAxis: {
				axisLabel: {
					show: true,
					textStyle: {
						color: '#707070',
					},
				},
				axisLine: {
					lineStyle: {
						color: '#dcdfe6',
						width: 1,
					},
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: '#dcdfe6',
						type: 'dashed',
					},
				},
			},
			barMaxWidth: '30%',
			barMinWidth: '6%',
		};

		return {};
	},
};
</script>

<style lang="scss" scoped></style>
